<template>
	<view class="">
		<view class="u-flex  u-row-between">
			<view class="u-flex-1" v-if="RenderSwitch">
				<switch @change="changeSwitch" color="#409EFF" />
			</view>
			<view v-else class="u-flex-1" @click="onClick">
				<text class="value-text">
					{{ValueText}}
				</text>
				<u-icon name="arrow-right" size="28" color="#409EFF"></u-icon>
			</view>

		</view>

		<template v-if="RenderPicker">
			<u-picker mode="time" :start-year="startYear" :params="PickerParams" v-model="showPicker"
				@confirm="onConfirmPicker" @cancel="onCancelPicker"></u-picker>
		</template>

		<template v-if="RenderUserSelectPopUp">
			<UserSelectPopUp ref="UserSelectPopUp" :value="value" @value="onSelectPopUpValue"></UserSelectPopUp>
		</template>

		<template v-if="RenderUserSelectPopUpMultiple">
			<UserSelectPopUpMultiple ref="UserSelectPopUpMultiple" :value="value" @value="onSelectPopUpValue">
			</UserSelectPopUpMultiple>
		</template>

		<template v-if="RenderAssetsSelectPopUp">
			<AssetsSelectPopUp ref="AssetsSelectPopUp" :value="value" @value="onSelectPopUpValue"></AssetsSelectPopUp>
		</template>
		<template v-if="RenderDepartmentSelectPopUp">
			<DepartmentSelectPopup ref="DepartmentSelectPopup" :value="value" @value="onSelectPopUpValue">
			</DepartmentSelectPopup>
		</template>
		<template v-if="RenderFactorySelectPopUp">
			<FactorySelectPopup ref="FactorySelectPopup" :value="value" @value="onSelectPopUpValue">
			</FactorySelectPopup>
		</template>
		<template v-if="RenderDicSelectPopUp">
			<DicSelectPopup :showDefaultValue="showDicSelectDefaultValue" ref="DicSelectPopup" :value="value"
				:dicKey="dicKey" @value="onSelectPopUpValue"></DicSelectPopup>
		</template>
		<template v-if="RenderDicSelectPopUpMultiple">
			<DicSelectPopupMultiple :showDefaultValue="showDicSelectDefaultValue" ref="DicSelectPopupMultiple"
				:value="value" :dicKey="dicKey" @value="onSelectPopUpValue"></DicSelectPopupMultiple>
		</template>

		<template v-if="RenderDicSelectCascaserPopUp">
			<DicSelectCascaderPopup ref="DicSelectCascaderPopup" :value="value" :dicKey="dicKey"
				@value="onSelectPopUpValue"></DicSelectCascaderPopup>
		</template>



	</view>
</template>

<script>
	import {
		dicList
	} from '@/filter/index.js'
	import UserSelectPopUp from '@/components/select/userSelectPopup.vue'
	import UserSelectPopUpMultiple from '@/components/select/userSelectPopupMultiple.vue'
	import AssetsSelectPopUp from '@/components/select/assetsSelectPopup.vue'
	import DepartmentSelectPopup from '@/components/select/departmentSelectPopup.vue'
	import FactorySelectPopup from '@/components/select/factorySelectPopup.vue'
	import DicSelectPopup from '@/components/select/dicSelectPopup.vue'
	import DicSelectPopupMultiple from '@/components/select/dicSelectPopupMultiple.vue'
	import DicSelectCascaderPopup from '@/components/select/dicSelectCascaderPopup.vue'
	export default {
		components: {
			UserSelectPopUp,
			AssetsSelectPopUp,
			UserSelectPopUpMultiple,
			DepartmentSelectPopup,
			FactorySelectPopup,
			DicSelectPopup,
			DicSelectPopupMultiple,
			DicSelectCascaderPopup
		},
		props: {
			disabled: Boolean,
			required: {
				type: Boolean,
				default: false
			},
			active: {
				type: Boolean,
				default: true
			},
			arrow: {
				type: Boolean,
				default: true
			},
			width: {
				type: [String, Number],
				default: '200'
			},
			dicKey: {
				type: String,
				default: ''
			},
			// //控制过滤出的值显示
			dicIncludesValue: {
				type: Array,
				default: () => {
					return []
				}
			},
			//查看模式
			viewModel: Boolean,
			label: {
				type: String,
				default: 'label'
			},
			value: {
				type: String,
				default: '请选择'
			},
			/**
			 * dic
			 * date-picker
			 * date-picker-ymd
			 * select-user
			 * select-user-multiple
			 * select-asset 
			 * select-department
			 * select-factory
			 * select-dic
			 * select-dic-multiple
			 * select-dic-cascader
			 */
			chooseType: {
				type: String,
				default: 'dic'
			},
			showDicSelectDefaultValue: {
				type: Boolean,
				default: false
			},
			customActionSheetList: {
				type: Array,
				default: () => {
					// [{name:'是',value:1},{name:'否',value:0}]
					return []
				}
			},
		},
		computed: {
			Value() {
				return this.value || this.placeholder
			},
			RenderSwitch() {
				return ['switch'].includes(this.chooseType)
			},
			RenderPicker() {
				return ['date-picker', 'date-picker-ymd'].includes(this.chooseType)
			},
			RenderUserSelectPopUp() {
				return ['select-user'].includes(this.chooseType)
			},

			RenderUserSelectPopUpMultiple() {
				return ['select-user-multiple'].includes(this.chooseType)
			},
			RenderAssetsSelectPopUp() {
				return ['select-asset'].includes(this.chooseType)
			},
			RenderDepartmentSelectPopUp() {
				return ['select-department'].includes(this.chooseType)
			},
			RenderFactorySelectPopUp() {
				return ['select-factory'].includes(this.chooseType)
			},
			RenderDicSelectPopUp() {
				return ['select-dic'].includes(this.chooseType) && !!this.dicKey
			},

			RenderDicSelectPopUpMultiple() {
				return ['select-dic-multiple'].includes(this.chooseType) && !!this.dicKey
			},
			RenderDicSelectCascaserPopUp() {
				return ['select-dic-cascader'].includes(this.chooseType) && !!this.dicKey
			},
			PickerParams() {
				if (this.chooseType === 'date-picker-ymd') {
					return {
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false
					}
				}
				return {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				}

			},

			HoverClass() {
				if (this.$slots?.right) {
					return 'none'
				}
				return 'u-cell-hover'
			},
			ValueText() {
				if (this.$slots?.right) {
					return ''
				}
				return this.valueText || "请选择"
			},
			Arrow() {
				if (this.viewModel || this.disabled || this.$slots?.right) {
					return false
				}
				return this.arrow
			},
			// CellItemValueStyle() {
			// 	if (this.viewModel || this.disabled) {
			// 		return {
			// 			'fontWeight': 400,
			// 			'fontSize': '28rpx',
			// 			'color': '#0F2E4D'
			// 		}
			// 	}
			// 	return {
			// 		'fontWeight': 400,
			// 		'fontSize': '28rpx',
			// 		'color': this.active ? '#409EFF' : '#98A5B3'
			// 	}
			// }
		},
		data() {
			return {
				valueText: '',
				showPicker: false,
				cellItemTitleStyle: {
					'fontWeight': 400,
					'fontSize': '28rpx',
					'color': '#98A5B3'
				},

				startYear: new Date().getFullYear()
			}
		},
		mounted() {
			
			this.init()
			this.initDefaultValue()
		},
		watch: {
			value: function(val) {
				if (val) {
					this.resetInit()
				}
			}
		},
		methods: {

			resetInit(text) {
				this.init()
				if (text) {
					console.log(text,'text');
					this.valueText = text
				}
			},
			changeSwitch(event) {
				this.$emit('input', event.detail.value)
			},

			onSelectPopUpValue(obj) {
				if (obj instanceof Array) {

					this.valueText = obj.map((item) => item.name).join('、')
					let val = obj.map((item) => item.value).join(',')
					this.$emit('input', val)
				} else {
					this.valueText = obj.name
					this.$emit('input', obj.value)
					if (obj?.other) {
						this.$emit('other', obj.other)
					}

				}
			},
			onConfirmPicker(data) {
				let {
					year,
					month,
					day,
					hour,
					minute
				} = data
				this.valueText = `${year|| ''}-${month|| ''}-${day|| ''} ${hour? hour+':' :''  }${minute||""}`
				this.$emit('input', this.valueText.trim())
			},

			onCancelPicker(data) {},
			initDefaultValue(){
				if (this.showDicSelectDefaultValue) {
					let dicValueList = dicList(this.dicKey)
					if (dicValueList) {
				
						this.valueText = dicValueList[0].name || ''
						this.$emit('input', dicValueList[0].value || '')
					}
				
				}  
			},
			init() {
				if (this.customActionSheetList.length && this.value != null && this.value != '') {
					const self = this
					let findResult = this.customActionSheetList.find((item) => item.value == this.value);
					self.valueText = findResult?.name || ''
					self.$emit('input', findResult.value)
					return
				}
				if (this.chooseType === 'dic') {
					 if (this.value != null && this.value != '' && this.dicKey) {
						let dicValueList = dicList(this.dicKey)

						let findDicValue = dicValueList.find((item) => {
							if (item.value == this.value) {
								return item
							}
						})
						this.valueText = findDicValue?.name || ''
						this.$emit('input', findDicValue?.value || '')
					}
				}
				this.$emit('set', this.value)
			},
			onClick() {
					const self = this
				if (this.viewModel || this.disabled) {
					return
				}
				if (this.customActionSheetList.length) {
					let itemList = this.customActionSheetList.map((e) => e.name);
					let itemValue = this.customActionSheetList.map((e) => e.value)
					wx.showActionSheet({
						itemList: itemList,
						success({
							tapIndex
						}) {

							self.valueText = itemList[tapIndex]
							self.$emit('input', itemValue[tapIndex])
						},
					})
					return
				}

				if (this.chooseType === 'dic') {
					if (this.dicKey) {
						let dicValueList = dicList(this.dicKey)
						if (this.dicIncludesValue.length) {
							dicValueList = dicValueList.filter((item) => this.dicIncludesValue.includes(item.value))
						}
						let itemList = dicValueList.map((e) => e.name);
						let itemValue = dicValueList.map((e) => e.value)
						console.log('----onClick-----');
					 
						wx.showActionSheet({
							itemList: itemList,
							success({
								tapIndex
							}) {
								self.valueText = itemList[tapIndex]
								self.$emit('input', itemValue[tapIndex])
							},
						})

					}
				} else if (this.RenderPicker) {
					this.showPicker = true
				} else if (this.RenderUserSelectPopUpMultiple) {
					this.$refs.UserSelectPopUpMultiple.openPopUp()
				} else if (this.RenderUserSelectPopUp) {
					this.$refs.UserSelectPopUp.openPopUp()
				} else if (this.RenderAssetsSelectPopUp) {
					this.$refs.AssetsSelectPopUp.openPopUp()
				} else if (this.RenderDepartmentSelectPopUp) {
					this.$refs.DepartmentSelectPopup.openPopUp()
				} else if (this.RenderFactorySelectPopUp) {
					this.$refs.FactorySelectPopup.openPopUp()
				} else if (this.RenderDicSelectPopUp) {
					this.$refs.DicSelectPopup.openPopUp()
				} else if (this.RenderDicSelectPopUpMultiple) {
					this.$refs.DicSelectPopupMultiple.openPopUp()
				} else if (this.RenderDicSelectCascaserPopUp) {
					this.$refs.DicSelectCascaderPopup.openPopUp()
				}
			}
		},
	}
</script>

<style lang="scss">
	.value {
		&-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #409EFF;

		}
	}
</style>
